<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="robots" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- PAGE TITLE HERE -->
  <title>编辑职位</title>

  <link href="/css/nice-select.css" rel="stylesheet">
  <link href="/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="/css/bootstrap-datepicker.min.css" rel="stylesheet">

  <!-- Style css -->
  <link href="/css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
  <div class="d-flex align-items-center mb-4 mt-4">
    <h4 class="fs-20 font-w600 mb-0 me-auto">编辑职位</h4>
    <div>
      <a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"> <i class="fas fa-envelope"></i></a>
      <a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"><i class="fas fa-phone-alt"></i></a>
      <a href="javascript:void(0);" class="btn btn-primary btn-sm"><i class="fas fa-info"></i></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <form id="jobEditForm">
            <!-- 隐藏字段存储职位ID -->
            <input type="hidden" name="id" th:value="${job.id}">

            <div class="row">
              <!-- 职位标题 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">职位标题</label>
                <input type="text" class="form-control solid" name="title"
                       th:value="${job.title}" placeholder="例如：Java高级工程师" required>
                <div class="error-message" id="titleError"></div>
              </div>

              <!-- 职位类型 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">职位类型</label>
                <select class="form-select form-control solid" name="jobType" required>
                  <option value="">请选择职位类型</option>
                  <option value="全职" th:selected="${job.jobType} == '全职'">全职</option>
                  <option value="兼职" th:selected="${job.jobType} == '兼职'">兼职</option>
                  <option value="实习" th:selected="${job.jobType} == '实习'">实习</option>
                  <option value="合同制" th:selected="${job.jobType} == '合同制'">合同制</option>
                </select>
                <div class="error-message" id="jobTypeError"></div>
              </div>

              <!-- 薪资范围 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">薪资范围</label>
                <input type="text" class="form-control solid" name="salaryRange"
                       th:value="${job.salaryRange}" placeholder="例如：15K-25K" required>
                <div class="error-message" id="salaryRangeError"></div>
              </div>

              <!-- 工作地点 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">工作地点</label>
                <input type="text" class="form-control solid" name="location"
                       th:value="${job.location}" placeholder="例如：北京市海淀区" required>
                <div class="error-message" id="locationError"></div>
              </div>

              <!-- 学历要求 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">学历要求</label>
                <select class="form-select form-control solid" name="education" required>
                  <option value="">请选择学历要求</option>
                  <option value="不限" th:selected="${job.education} == '不限'">不限</option>
                  <option value="大专" th:selected="${job.education} == '大专'">大专</option>
                  <option value="本科" th:selected="${job.education} == '本科'">本科</option>
                  <option value="硕士" th:selected="${job.education} == '硕士'">硕士</option>
                  <option value="博士" th:selected="${job.education} == '博士'">博士</option>
                </select>
                <div class="error-message" id="educationError"></div>
              </div>

              <!-- 招聘人数 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600">招聘人数</label>
                <input type="text" class="form-control solid" name="count"
                       th:value="${job.count}" placeholder="例如：5">
              </div>

              <!-- 过期时间 -->
              <div class="col-xl-6 col-md-6 mb-4">
                <label class="form-label font-w600 required-star">截止日期</label>
                <div class="input-group">
                  <div class="input-group-text"><i class="far fa-clock"></i></div>
                  <input type="text" class="form-control datepicker solid"
                         name="expirationTime" th:value="${#temporals.format(job.expirationTime, 'yyyy-MM-dd')}" required readonly>
                </div>
                <div class="error-message" id="expirationTimeError"></div>
              </div>

              <!-- 职位描述 -->
              <div class="col-xl-12 mb-4">
                <label class="form-label font-w600 required-star">职位描述</label>
                <textarea class="form-control solid" name="description"
                          rows="6" placeholder="详细描述职位职责和要求..." required
                          th:text="${job.description}"></textarea>
                <div class="error-message" id="descriptionError"></div>
              </div>

              <!-- 职位状态 -->
              <div class="col-xl-12 mb-4">
                <label class="form-label font-w600 required-star">职位状态</label>
                <div>
                                    <span class="me-4">
                                        <label class="radio-inline">
                                            <input type="radio" name="status" value="1" th:checked="${job.status} == 1"> 启用
                                        </label>
                                    </span>
                  <span>
                                        <label class="radio-inline">
                                            <input type="radio" name="status" value="0" th:checked="${job.status} == 0"> 禁用
                                        </label>
                                    </span>
                </div>
              </div>
            </div>

            <div class="card-footer text-end">
              <button type="button" class="btn btn-light me-3" onclick="window.history.back()">取消</button>
              <button type="submit" class="btn btn-primary">更新职位</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 在 jQuery 之前引入 SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--**********************************
    Scripts
***********************************-->
<!-- Required vendors -->
<script src="/js/global.min.js"></script>
<script src="/js/Chart.bundle.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/datatables.init.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/custom.min.js"></script>
<script src="/js/dlabnav-init.js"></script>
<script src="/js/demo.js"></script>

<script>
  $(document).ready(function() {
    // 初始化日期选择器
    $('.datepicker').datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true,
      language: 'zh-CN',
      startDate: new Date()
    });

    // 表单提交处理
    $('#jobEditForm').on('submit', function(e) {
      e.preventDefault();

      // 清除之前的错误信息
      $('.error-message').hide();

      // 表单验证
      let isValid = true;
      $('#jobEditForm [required]').each(function() {
        if (!$(this).val()) {
          isValid = false;
          const fieldName = $(this).attr('name');
          $(`#${fieldName}Error`).text('此字段为必填项').show();
        }
      });

      if (!isValid) {
        Swal.fire({
          icon: 'error',
          title: '表单验证失败',
          text: '请填写所有必填字段'
        });
        return;
      }

      // 收集表单数据
      const formData = {
        id: $('input[name="id"]').val(),
        title: $('input[name="title"]').val(),
        jobType: $('select[name="jobType"]').val(),
        salaryRange: $('input[name="salaryRange"]').val(),
        location: $('input[name="location"]').val(),
        education: $('select[name="education"]').val(),
        count: $('input[name="count"]').val(),
        expirationTime: $('input[name="expirationTime"]').val() + "T00:00:00",
        description: $('textarea[name="description"]').val(),
        status: $('input[name="status"]:checked').val()
      };

      // 发送AJAX请求
      $.ajax({
        url: '/api/job/update',
        type: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
          Swal.fire({
            icon: 'success',
            title: '更新成功',
            text: '职位信息已成功更新',
            showConfirmButton: false,
            timer: 2000
          }).then(() => {
            window.location.href = '/user/job-list';
          });
        },
        error: function(xhr) {
          let errorMsg = '更新失败，请稍后再试';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg = xhr.responseJSON.message;
          }
          Swal.fire({
            icon: 'error',
            title: '更新失败',
            text: errorMsg
          });
        }
      });
    });

    // 实时表单验证
    $('#jobEditForm [required]').on('blur', function() {
      if (!$(this).val()) {
        const fieldName = $(this).attr('name');
        $(`#${fieldName}Error`).text('此字段为必填项').show();
      } else {
        $(`#${fieldName}Error`).hide();
      }
    });
  });
</script>
</body>
</html>